<template>
  
  <div class="recommend-container">
    <div style="position:absolute;opacity:0;width:500px;height:500px;z-index:-10">
      <div id="playercontainer4" ></div>
    </div>
    
    <!-- <div id="playercontainer5"></div> -->
    <!-- <video-player style="width:500px;height:200px;border:3px solid red;" class="vjs-custom-skin" :options="ttt"></video-player> -->
    <!-- <ali-player style="width:500px;height:500px;" source="rtmp://bd1.scgsdsj.com:41319/live/6202176B130544BEBB38D6DD4A815144000000" ref="player"></ali-player> -->
    <!-- <div style="width:500px;height:500px;">
      <div class="prism-player" id="J_prismPlayer" ></div>
    </div> -->
    
    <!-- <ul class="type-wrap clearfix" ref="typeWrap">
      <li class="type-item clearfix fl" v-for="(item,index) in typeData" :class="{'active':item.active}" @click="typeEvent(item)" :key="index">
        <div class="fl left">
          <div class="label">{{item.rcmdName}}</div>
          <div class="num">{{item.count}}</div>
        </div>
        <div class="fr right">
          <img v-if="item.active" :src="item.urlOn" alt="" >
          <img v-else :src="item.url" alt="">
        </div>
      </li>
    </ul> -->
    <div class="type-wrap1" ref="typeWrap">
      <div class="type-content">
        <div class="all left " :class="{'active':typeList[0].active}" v-if="typeList.length>0" @click="typeEvent(typeList[0])">
          <img :src="typeList[0].url" alt="" v-show="!typeList[0].active">
          <img :src="typeList[0].urlOn" alt="" v-show="typeList[0].active">
          <span class="label">{{typeList[0].rcmdName}}</span>
          <span class="val">{{typeList[0].count}}</span>
        </div>
        <div class="right">
          <div class="type1" v-if="typeList.length>0">
            <div class="t-title">{{typeList[1].rcmdName}}</div>
            <ul class="type-list" >
              <li class="type-item" v-for="(item,index) in typeList[1].subRcmdCodes" :key="index" :class="{'margin':index == 1 || index == 4,'active':item.active}" @click="typeEvent(item)">
                <img :src="item.url" alt="" v-show="!item.active">
                <img :src="item.urlOn" alt="" v-show="item.active">
                <span class="label">{{item.rcmdName}}</span>
                <span class="val">{{item.count}}</span>
              </li>
            </ul>
            <div class="monitor" v-for="(item,index) in typeList[2].subRcmdCodes"  @mouseenter="monitorHover = true" @mouseleave="monitorHover = false" v-if="typeList.length>0" @click="typeEvent(item)">
              <img src="./image/AB0201C0201_normal.png" alt="" v-show="!monitorHover && !item.active">
              <img src="./image/AB0201C0201_selected.png" alt="" v-show="monitorHover && !item.active">
              <img src="./image/AB0201C0201_selected1.png" v-show="item.active" alt="" >
              <div class="info">
                <span class="label">{{item.rcmdName}}</span>
                <span class="val">{{item.count}}</span>
              </div>
            </div>
          </div>
          <div class="type2" v-if="typeList.length>0">
            <div class="t-title">{{typeList[3].rcmdName}}</div>
            <ul class="type-list">
              <li class="type-item" v-for="(item,index) in typeList[3].subRcmdCodes" :key="index" :class="{'margin':index == 1 || index == 4,'active':item.active}" @click="typeEvent(item)">
                <img :src="item.url" alt="" v-show="!item.active">
                <img :src="item.urlOn" alt="" v-show="item.active">
                <span class="label">{{item.rcmdName}}</span>
                <span class="val">{{item.count}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      
    </div>
    <div  class="recommend-content clearfix" v-loading="videoLoading" >
    <!-- <div  class="recommend-content clearfix" v-loading="videoLoading" :style="{'top':typeDataHeight+'px'}" > -->
      <ul class="company-wrap " >
        <li class="company-item clearfix" :class="{'active':item.active}" v-for="item in companies" :key="item.companyCode" @click="companyEvent(item)">
          <img src="./image/choose.png" alt="" v-show="item.active" class="active-img">
          <img src="./image/company_icon.png" alt="" v-show="!item.active" class="company-img">
          <span>{{item.companyName}}</span>
        </li>
      </ul>
      <div  class="video-wrap clearfix" v-show="videoData.length > 0" style="height:100%;">
        <div class="full-screen" @click="fullScreen" @mouseenter="fullHover = true" @mouseleave="fullHover = false">
          <img src="./image/full-screen.png" alt="" v-show="!fullHover">
          <img src="./image/full-screen-hover.png" alt="" v-show="fullHover">
          <span>全屏</span>
        </div>
        <div class="auto-wrap" @mouseenter="autoHover = true" @mouseleave="autoHover = false" @click="autoSlide">
          <img src="./image/auto.png" alt="" v-show="!autoHover">
          <img src="./image/auto_hover.png" alt="" v-show="autoHover">
        </div>
        <div class="prev prev-no" @click="prevEvent" :class="{'no-more':videoFilter.page <= 1}">
          <div class="img-wrap">  
            <img src="./image/prev.png" alt="">
          </div>
          <div class="tips">上一组</div>
        </div>
        <ul id="videoWrap" class="video-content clearfix screen4 " :class="{'screen4':screenNum==4,'screen9':screenNum==9,'fullScreen':isFull1}" style="height:100%;" >
          <div class="video-top" v-show="isFull1 && clickSlide">
            <div class="left">
              <span v-show="!ispauseSlide" class="time"><span class="val">{{autoTime}}</span>秒后</span>
              <span v-show="!ispauseSlide" class="label">播放下一组</span>
              <span v-show="ispauseSlide" class="time stop">已暂停轮巡</span>
            </div>
            <div class="right">
              <div class="btn" @click="pauseSlide" v-show="!ispauseSlide"><img class="pause-icon" src="./image/pause.png" alt="">暂停轮巡</div>
              <div class="btn" @click="startSlide" v-show="ispauseSlide"><img class="play-icon" src="./image/play.png" alt="">开始轮巡</div>
              <div class="btn" @click="stopSlide"><img class="stop-icon" src="./image/stop.png" alt="">退出自动轮巡</div>
            </div>
          </div>
          <li class="video-item" v-for="(item,index) in videoData" :key="index" :class="{'full-item':isFull1}" :ref="`videoData${index}`" >
            
            <!-- <div >SDFSDF</div> -->
            <!-- <div :style="{'height':videoHeight+'px'}"></div> -->
            <div class="video" @mouseenter="activeVideo = index" @mouseleave="activeVideo = -1"  style="position:relative">
              
              <!-- <div style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:100" @dblclick="fullScreenHandle(index)" @click="playHandle(index)"></div> -->
              <!-- <video-player  muted  class="vjs-custom-skin" :options="playerOptions[index]" :ref="'video'+index" style="height:100%;"  @fullscreenchange="onPlayerFullScreenchange($event)" ></video-player> -->
              <div :id="'playercontainer'+index" :ref="'video'+index"></div>
              <div class="wo" @dblclick="fullEvent(item,index)" ></div>
              <transition name="move">
                <!-- <div v-show="activeVideo == index" class="bottom" :key="index"> -->
                <div  class="bottom" :key="index">
                  <span class="type"  >{{item.rcmdName}}</span>
                  <span class="title">{{item.title}}</span>
                  <div class="handle-wrap">
                    <!-- <div class="collection">
                      <img src="./image/collection_on.png" alt="">
                      <img src="./image/collection.png" alt="">
                    </div> -->
                    <!-- <img src="./image/full-screen-item.png" alt="" @click="fullScreenHandle(index)"> -->
                    <img src="./image/full-screen-item.png" alt="" @click="tttt(item,index)">
                  </div>
                </div>
                
              </transition>
              <div v-show="activeVideo != index" class="type type-no">{{item.rcmdName}}</div>
            </div>
          </li>
          
        </ul>
        <div class="next" @click="nextEvent" :class="{'no-more':videoFilter.page >= pages}">
          <div class="img-wrap">  
            <img src="./image/next.png" alt="">
          </div>
          <div class="tips">下一组</div>
        </div>
      </div>
      <div class="empty-content" v-show="videoData.length <= 0" >
        <img src="./image/empty_search.png" alt="">
        <div class="tips">抱歉，暂未搜索到相关视频</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getTypeList , getVideoList} from '@/api/live/recommend'
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
import 'videojs-contrib-hls.js/src/videojs.hlsjs'
import VueAliplayer from 'vue-aliplayer'
import screenfull from 'screenfull'

export default {
  data() {
    
    return {
      clickSlide:false,
      ispauseSlide:false,
      timer:'',
      countdownTimer:'',
      autoTime:30,
      isFull1:false,
      fullHover:false,
      monitorHover:false,
      autoHover:false,
      typeList:[],
      playerList:['player0','player1','player2','player3'],
      videoHeight:'',
      pages:0,
      videoLoading:false,
      contentHeight:0,
      show:false,
      activeVideo:-1,
      typeData:[],
      typeDataHeight:188,
      companies:[],
      videoData:[],
      videoFilter: {
        page:1,
        pageSize:4,
        rcmdCode:'',
        companyCode:''
      },
      playerOptions:[],
      ttt: {
        preload:'auto',
        fluid: true,
        autoplay:false,
        aspectRatio:"16:30",
        techOrder: ['flash'], // 兼容顺序
        // controls:false,
        sources: [{
          type: 'rtmp/mp4',
          src: "rtmp://bd1.scgsdsj.com:41319/live/4614F7005D31413C9C0EFF9C37532B60000000"
        }],
        controlBar: {
          timeDivider: true,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      }
    }
  },
  mounted() {
    
    let _this = this
    window.onresize = function() {
      if(screenfull.isFullscreen) {
        _this.isFull1 = true
      }else {
        _this.isFull1 = false
        _this.clickSlide = false
        _this.stopSlide()
      }
		};
    // let player = new Aliplayer({
		// 			id: 'J_prismPlayer',
		// 			width: '100%',
		// 			height:'100%',
		// 			autoplay: true,
    //       prismType: 2,
    //       isLive:true,
		// 			vid: '',
		// 			accId: '',
    //       accSecret: '',
		// 			apiKey: '',
		// 			source: 'rtmp://bd1.scgsdsj.com:41319/live/6202176B130544BEBB38D6DD4A815144000000',  //视频地址
		// 			showBarTime: 3000000,
		// 			// cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png'
    //     });
    // this.contentHeight = document.documentElement.clientHeight - this.$refs.typeWrap.offsetHeight - 114
    // console.log(this.contentHeight)
    this.getTypeList()
    this.getVideoList()
    this.$store.commit('switchScreen',4)
    var p = cyberplayer("playercontainer4").setup({
      flashplayer: "./cyberplayer.flash.swf",
      width: 500,
      height: 500,
      file: 'rtmp://bd1.scgsdsj.com:41319/live/DA60DF560E264BCABD2067F455C6ACCA000000', // <—rtmp直播地址
      autostart: true,
      volume: 100,
      controls: true,
      stretching:'exactfit',
      rtmp: {
          reconnecttime: 5, // rtmp直播的重连次数
          bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
      },
      ak: "80a7c74b8f194b0a90d45b0077bc25f8" // 公有云平台注册即可获得accessKey
    });
  },
  computed: {
    
    screenNum() {
      return this.$store.state.screenNum
    },
    // fullScreen() {
    //   return this.$store.state.fullScreen
    // }
  },
  
  watch: {
    screenNum(val) {
      this.videoFilter.pageSize = val
      this.getVideoList()
      if(val == 4) {
        this.videoHeight = (this.contentHeight - 55 ) / 2
      }
      if(val == 9) {
        this.videoHeight = (this.contentHeight - 55 ) / 3
      }
      
    },
    isFull1 (val) {
      this.ifFull1 = val
      if(!val) {
        this.videoData.map(item => {
          item.hhh = false
        })
      }
    }
  },
  components: {
    videoPlayer,
    'ali-player': VueAliplayer
  },
  beforeDestroy () {
    this.playerList.map(item => {
      // item.remove()
    })
  },
  destroyed () {
    this.$off()
    this.$destroy()
  },
  methods: {
    // 轮询
    autoSlide() {
      this.ispauseSlide = false
      this.fullScreen()
      this.clickSlide = true
      // if(this.videoFilter.page == this.pages) {
      //   this.videoFilter.page = 1
      // }
      this.timer = setInterval(() => {
        if(this.videoFilter.page == this.pages) {
          this.videoFilter.page = 1
          this.getVideoList1()
        }else {
          this.videoFilter.page++
          this.getVideoList1()
        }
      }, 30000);

      this.countdownTimer = setInterval(() => {
        this.autoTime--
        if(this.autoTime == 0) {
          this.autoTime = 30
        }
      }, 1000);
    },
    // 暂停轮询
    pauseSlide() {
      this.ispauseSlide = true
      clearInterval(this.timer)
      clearInterval(this.countdownTimer)
    },
    // 开始轮巡
    startSlide() {
      this.ispauseSlide = false
      clearInterval(this.timer)
      clearInterval(this.countdownTimer)
      this.autoTime = 30
      this.autoSlide()
    },
    // 退出轮巡
    stopSlide() {
      clearInterval(this.timer)
      clearInterval(this.countdownTimer)
      this.autoTime = 30
      this.exitFullScreen()
    },
    fullScreen() {
      let el = document.getElementById('videoWrap')
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if(typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if(typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if(wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    fullEvent(item,index) {
      if(!item.hhh) {
        this.tttt(item,index)
        item.hhh = true
      }else {
        item.hhh = false
        this.exitFullScreen()
      }
    },
    tttt(item,index) {
      item.hhh = true
      let el = this.$refs[`videoData${index}`][0]
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
        wscript;
      if(typeof rfs != "undefined" && rfs) {
        // this.isFull = true
        rfs.call(el);
        return;
      }
      if(typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if(wscript) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    exitFullScreen() {
      var el= document
      var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
      wscript;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
        return;
      }

      if (typeof window.ActiveXObject != "undefined") {
        wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
        wscript.SendKeys("{F11}");
        }
      }
      
    },
    fullScreenHandle(index) {
      let gv='video'+index
      let videoPlayer = this.$refs[gv][0]
      // console.log(this)
      // this.player.pause()
      // videoPlayer.requestFullscreen();  
      // videoPlayer.isFullscreen(true)
      this.playerList[index].setFullscreen(true)
    },
    playHandle(index) {
      let gv='video'+index
      let videoPlayer = this.$refs[gv][0].player
      videoPlayer.play()
    },
    mouseenter() {
      this.show = true
    },
    mouseleave() {
      this.show = false
    },
    // 获取类型列表
    getTypeList() {
      getTypeList().then(res => {
        // 类型数据封装
        // let typeList = []
        let allCount = 0
        // typeList.push({count: 0,rcmdCode: "",rcmdName: "全部"})
        this.typeList = res.data.body.rcmds
        // 全部
        this.typeList[0].active = true
        this.typeList[0].url =  this.typeList[0].icons[0].iconUrl
        this.typeList[0].urlOn = this.typeList[0].icons[1].iconUrl
        // 运营管理/应急监控/建设施工
        this.typeList[1].subRcmdCodes.map(item => {
          item.url =  item.icons[0].iconUrl
          item.urlOn =  item.icons[1].iconUrl
        })
        this.typeList[2].subRcmdCodes.map(item => {
          item.url =  item.icons[0].iconUrl
          item.urlOn = item.icons[1].iconUrl
        })
        this.typeList[3].subRcmdCodes.map(item => {
          item.url =  item.icons[0].iconUrl
          item.urlOn =  item.icons[1].iconUrl
        })
        // typeList.map((item,index) => {
        //   item.active = false
        //   allCount += item.count
        //   if(item.rcmdCode == '') {
        //     item.active = true
        //   }

        //   item.url = process.env.VUE_APP_BASE_API + item.icons[0].iconUrl
        //   item.urlOn = process.env.VUE_APP_BASE_API + item.icons[1].iconUrl
        // })
        // typeList.map(item => {
        //   if(item.rcmdCode == '') {
        //     item.active = true
        //     item.count = allCount
        //   }
        // })
        // this.typeData = typeList
        
        // this.$nextTick(() => {
        //   // setTimeout(() => {
        //     this.contentHeight = document.documentElement.clientHeight - this.$refs.typeWrap.offsetHeight - 82
        //     this.videoHeight = (this.contentHeight - 55 ) / 2
        //     // this.typeDataHeight = this.$refs.typeWrap.offsetHeight
        //   // }, 500);
          
        // })
        

        // 公司数据封装
        let companyList = []
        companyList.push({companyCode:'',companyName:'全部'})
        companyList = companyList.concat(res.data.body.companies)
        
        companyList.map(item => {
          item.active = false
          if(item.companyCode == '') {
            item.active = true
          }
        })
        this.companies = companyList
      })
    },
    // 获取视屏列表
    getVideoList() {
      this.videoLoading = true
      getVideoList(this.videoFilter).then(res => {
        
        this.videoData = res.data.body.rcmds.list
        this.pages = res.data.body.rcmds.pages
        let videoList = res.data.body.rcmds.list
        // console.log(videoList)
        // this.playerOptions = []
        // console.log(this.screenNum)
        if(this.screenNum == 4) {
          this.playerList = ['player0','player1','player2','player3']
        }else if(this.screenNum == 9) {
          this.playerList = ['player0','player1','player2','player3','player4','player5','player6','player7','player8']
        }
        videoList.map((item,index) => {
          this.$nextTick(() => {
            this.playerList[index] = cyberplayer("playercontainer"+index).setup({
              flashplayer: "./cyberplayer.flash.swf",
              width: '100%',
              height: '100%',
              file: item.url, // <—rtmp直播地址
              autostart: true,
              volume: 100,
              controls: false,
              controlbar: {
                barLogo: false,
              },
              stretching:'exactfit',
              rtmp: {
                  reconnecttime: 2, // rtmp直播的重连次数
                  bufferlength: 0 // 缓冲多少秒之后开始播放 默认1秒
              },
              ak: "80a7c74b8f194b0a90d45b0077bc25f8" // 公有云平台注册即可获得accessKey

            });
          })
           

          // this.playerOptions[index] = {
          //   // muted:true,
          //   preload:'auto',
          //   // fluid: true,
          //   live:true,
          //   autoplay:'true',
          //   // aspectRatio:"25:13",
          //   techOrder: ['flash'], // 兼容顺序
          //   // controls:false,
          //   sources: [{
          //     type: 'rtmp/mp4',
          //     src: item.url
          //   }],
          //   notSupportedMessage: '此视频暂无法播放，请稍后再试',
          //   controlBar: {
          //     // timeDivider: true,
          //     // durationDisplay: true,
          //     remainingTimeDisplay: false,
          //     fullscreenToggle: true  //全屏按钮
          //   }
          // }
        })
        // 公司数据封装
        let companyList = []
        companyList.push({companyCode:'',companyName:'全部'})
        companyList = companyList.concat(res.data.body.companies)
        
        companyList.map(item => {
          item.active = false
          if(item.companyCode == '') {
            item.active = true
          }
        })
        this.companies = companyList
        this.videoLoading = false
        
        this.$previewRefresh()
      }).catch(err => {
        this.videoLoading = false
      })
    },
    // 获取视屏列表
    getVideoList1() {
      this.videoLoading = true
      getVideoList(this.videoFilter).then(res => {
        
        this.videoData = res.data.body.rcmds.list
        this.pages = res.data.body.rcmds.pages
        let videoList = res.data.body.rcmds.list
        if(this.screenNum == 4) {
          this.playerList = ['player0','player1','player2','player3']
        }else if(this.screenNum == 9) {
          this.playerList = ['player0','player1','player2','player3','player4','player5','player6','player7','player8']
        }
        videoList.map((item,index) => {

          this.$nextTick(() => {
            this.playerList[index] = cyberplayer("playercontainer"+index).setup({
              flashplayer: "./cyberplayer.flash.swf",
              width: '100%',
              height: '100%',
              file: item.url, // <—rtmp直播地址
              autostart: true,
              volume: 100,
              controls: false,
              controlbar: {
                barLogo: false,
              },
              stretching:'exactfit',
              rtmp: {
                  reconnecttime: 2, // rtmp直播的重连次数
                  bufferlength: 0 // 缓冲多少秒之后开始播放 默认1秒
              },
              ak: "80a7c74b8f194b0a90d45b0077bc25f8" // 公有云平台注册即可获得accessKey
            });
          })

          // this.playerOptions[index] = {
          //   muted:true,
          //   preload:'auto',
          //   fluid: true,
          //   live:true,
          //   autoplay:'true',
          //   aspectRatio:"16:20",
          //   techOrder: ['flash'], // 兼容顺序
          //   controls:false,
          //   // height:'500px',
          //   sources: [{
          //     type: 'rtmp/mp4',
          //     src: item.url
          //   }],
          //   notSupportedMessage: '此视频暂无法播放，请稍后再试',
          // }
        })
        this.videoLoading = false
        
        this.$previewRefresh()
      }).catch(err => {
        this.videoLoading = false
      })
    },
    // 类型筛选
    typeEvent(item) {
      this.typeList[0].active = false
      console.log('jjj')
      this.typeList[1].subRcmdCodes.map(item => {
        item.active = false
      })
      this.typeList[2].subRcmdCodes.map(item => {
        item.active = false
      })
      this.typeList[3].subRcmdCodes.map(item => {
        item.active = false
      })


      this.videoFilter.page = 1
      this.videoFilter.companyCode = ''
      // this.typeData.map(item => {
      //   item.active = false
      // })
      item.active = !item.active
      this.videoFilter.rcmdCode = item.rcmdCode
      if(item.rcmdCode == 'AB0000') {
        this.videoFilter.rcmdCode = ''
      }
      this.getVideoList()
    },
    // 公司筛选
    companyEvent(item) {
      this.companies.map(item => {
        item.active = false
      })
      item.active = !item.active
      this.videoFilter.companyCode = item.companyCode
      this.videoFilter.page = 1
      this.getVideoList1()
    },
    // 上一页
    prevEvent() {
      if(this.videoFilter.page > 1) {
        this.videoFilter.page--
        this.getVideoList1()
      }
      
    },
    // 下一页
    nextEvent() {
      if(this.videoFilter.page < this.pages) { 
        this.videoFilter.page++
        this.getVideoList1()
      }
      
    }
  }
};
</script>
<style lang="less" >
.jw-title {
  z-index:100000000 !important;
}
.video-js {
  padding-top:0 !important;
  height:100% !important;
}
</style>
<style scoped lang="less" >
.recommend-container {
  color:#0F1013;
  font-size:16px;
  position:absolute;
  left:0;
  top:60px;
  bottom:0;
  width:100%;
  .move-enter-active, 
  .move-leave-active {
      transition: all .3s;
  }

  .move-enter,
  .move-leave-to{
      transform: translate3d(0px, 72px, 0);
  }
  // min-width:1800px;
  .type-wrap1 {
    padding:20px;
    box-sizing: border-box;
    background:#F0F3F5;
    .type-content {
      height:168px;
      display:flex;
      .all {
        width:150px;
        border-radius: 4px;
        border-top:6px solid #3BABF2;
        background:#fff;
        display:flex;
        flex-direction: column;
        align-items: center;
        // justify-content: space-between;
        color:#0F1013;
        font-weight: bold;
        padding-top:36px;
        padding-bottom:28px;
        cursor: pointer;
        &.active {
          background:#3BABF2;
          color:#fff;
        }
        img {
          display:block;
          width:24px;
          margin-bottom:25px;
        }
        .label {
          font-size:18px;
          margin-bottom:15px;
        }
        .val {
          font-size:16px;
        }
      }
      .right {
        flex:1;
        flex-shrink: 0;
        margin-left:20px;
        display:flex;
        .t-title {
          font-size:18px;
          color:#0F1013;
          font-weight: bold;
        }
        >div {
          background:#fff;
          width: calc((100% - 20px)/2);
          flex-shrink: 0;
          border-radius: 4px;
          padding-top:10px;
          padding-bottom:20px;
          box-sizing: border-box;
          .type-list {
            display:flex;
            flex-wrap: wrap;
            .type-item {
              transition:.2s;
              &.margin {
                margin:10px 20px;
              }
              margin:10px 0;
              width: calc((100% - 40px)/3);
              height:40px;
              display:flex;
              align-items: center;
              padding:0 18px;
              box-sizing: border-box;
              justify-content: space-between;
              background:#F7F7F9;
              border-radius: 5px;
              cursor: pointer;
              img {
                width:20px;
                display:block;
              }
              .label {
                // font-size:18px;
                flex:1;
                margin-left:12px;
              }
              .val {
                font-weight: bold;
              }
            }
            .type-item:hover {
              background:#E6E6EB;
              transition:.2s;
            }
          }
          &.type1 {
            border-top:6px solid #5B7EEA;
            padding-left:20px;
            padding-right:90px;
            position:relative;
            .type-item {
              &.active {
                background:#5B7EEA;
                color:#fff;
              }
            }
            .monitor {
              position: absolute;
              right:-66px;
              top:22px;
              cursor: pointer;
              .info {
                position:absolute;
                width:100%;
                left:0;
                top:50px;
                display:flex;
                flex-direction: column;
                align-items: center;
                .label {
                  font-size:14px;
                  color:#fff;
                }
                .val {
                  font-size:16px;
                  color:#fff;
                  font-weight: bold;
                }
              }
            }
          }
          &.type2 {
            border-top:6px solid #F8616F;
            margin-left:20px;
            padding-left:90px;
            padding-right:20px;
            .type-item {
              &.active {
                background:#F8616F;
                color:#fff;
              }
            }
          }
        }
      }
    }
    
  }
  .type-wrap {
    background:#EBEEF0;
    padding:8px 12px;
    box-sizing: border-box;
    .type-item {
      margin:8px;
      width:160px;
      height:70px;
      background:#fff;
      border-radius: 4px;
      color:#fff;
      padding:0 12px;
      box-sizing: border-box;
      cursor: pointer;
      
      .left {
        margin-top:12px;
        .label {
          font-size:22px;
          color:#585D67;
        }
        .num {
          font-size:18px;
          color:#808080
        }
      }
      &.active {
        background:#57AADE;
        color:#fff;
        .left {
          .label,.num {
            color:#fff;
          }
        }
      }
      .right {
        margin-top:23px;
        img {
          width:34px;
          display:block;
        }
      }
    }
  }
  .recommend-content {
    padding:20px;
    box-sizing: border-box;
    position: relative;
    display:flex;
    position:absolute;
    left:0;
    bottom:0;
    top:208px;
    width:100%;
    .company-wrap {
      background:#F7F7F9;
      // padding:20px;
      padding:20px 0;
      box-sizing: border-box;
      border-radius: 4px;
      width:240px;
      overflow-y: auto;
      flex-shrink: 0;
      .company-item {
        margin:0 auto;
        // width:268px;
        margin:5px 20px;
        height:36px;
        cursor: pointer;
        color:#0F1013;
        border-radius: 6px;
        font-size:16px;
        padding:0 15px;
        box-sizing: border-box;
        display:flex;
        align-items: center;
        .active-img {
          width:17px;
          display:block;
          margin-right:5px;
        }
        .company-img {
          width:14px;
          display:block;
          margin-right:8px;
        }
        img {
          // width:18px;
          display:block;
          margin-right:5px;
        }
        &.active {
          background:#3BABF2;
          color:#fff;
          font-weight: bold;
        }
        &.active:hover {
          background:#3BABF2;
          color:#fff;
        }
      }
      .company-item:hover {
        background:rgba(59,171,242,0.2);
      }
    }
    .video-wrap {
      // margin-top:-10px;
      // padding:0 30px;
      padding-right:10px;
      padding-left:30px;
      position: relative;
      display:flex;
      align-items: center;
      align-self:flex-start;
      justify-content: space-between;
      flex:1;
      .full-screen {
        width:60px;
        height:60px;
        position:absolute;
        background:rgba(204,204,204,.2);
        border-radius: 5px;
        right:10px;
        top:0;
        cursor: pointer;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width:20px;
          display:block;
        }
        span {
          font-size:14px;
          opacity: .6;
        }
      }
      .auto-wrap {
        cursor: pointer;
        position:absolute;
        right:10px;
        bottom:0;
        img {
          width:102px;
        }
      }
      .prev,.next {
        cursor: pointer;
        height:150px;
        text-align: center;
        .img-wrap {
          width:60px;
          height:120px;
          background:#3BABF2;
          border-radius: 8px;
          text-align: center;
          vertical-align: middle;
          img {
            margin-top:46px;
          }
        }
        &.no-more {
          cursor: not-allowed;
          
          opacity:0.2;
        }
        .tips {
          font-size:16px;
          margin-top:6px;
        }
        
      }
      .next {
        right:20px;
      }
      .video-content {
        padding:10px 50px;
        flex-shrink:0;
        flex-wrap: wrap;
        flex:1;
        position:relative;
        .video-top {
          position:absolute;
          z-index:1000000000;
          width:calc(100% - 20px);
          left:10px;
          right:10px;
          top:-10px;
          height:110px;
          background:linear-gradient(0deg,rgba(15,16,19,0.2),rgba(15,16,19,1));
          display:flex;
          justify-content: space-between;
          align-items: center;
          padding:0 10px;
          .left {
            .time {
              color:#FFBD38;
              font-size:24px;
              .val {
                font-weight: bold;
                margin-right:5px;
              }
              &.stop {
                font-weight: bold;
              }
            }
            .label {
              font-size:24px;
              color:#fff;
              margin-left:19px;
            }
          }
          .right {
            display:flex;
            .btn {
              width:200px;
              height:50px;
              border-radius: 25px;
              display:flex;
              align-items: center;
              justify-content: center;
              background:rgba(12,11,11,0.5);
              // background:red;s
              margin-right:20px;
              color:#fff;
              cursor: pointer;
              img {
                margin-right:15px;
              }
              .pause-icon {
                width:18px;
              }
              .play-icon {
                width:15px;
              }
              .stop {
                width:15px;
              }
            }
          }
        }
        &.fullScreen {
          position:fixed;
          width:100%;
          height:100%;
          left:0;
          top:0;
          padding:0;
          border:10px solid #000;
        }
        .video-item {
          display:inline-block;
          width:50%;
          // border:1px solid red;
          // max-width:200px; 
          flex-shrink:0;
          box-sizing: border-box;
          // border-radius: 4px;
          box-sizing: border-box;
          position: relative;
          padding:5px;
          margin-right:-1px;
          margin-top:-1px;
          &.full-item {
            padding:0;
            border:10px solid #000;
            .video {
              border-radius: 0;
            }
          }
          .type {
            font-size:15px;
            margin-right:12px;
            // width:52px;
            padding:0 5px;
            height:28px;
            flex-shrink: 0;
            text-align: center;
            line-height:28px;
            background:rgba(255,255,255,.2);
            border-radius:4px;
            display:block;
            &.type-no {
              background:rgba(0,0,0,.6);
              z-index:100;
              color:#fff;
              position: absolute;
              left:20px;
              bottom:22px;
            }
          }
          .video {
            height:100%;
            position: relative;
            // border:4px solid red;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            // height:200px;
            .wo {
              position:absolute;
              left:0;
              bottom:0px;
              z-index:10000000;
              width:100%;
              height:100%;
            }
            .bottom {
              position: absolute;
              z-index:1000000000000;
              width:100%;
              bottom:0;
              height:72px;
              background: -webkit-linear-gradient(transparent, #000); /* Safari 5.1 - 6.0 */
              background: -o-linear-gradient(transparent, #000); /* Opera 11.1 - 12.0 */
              background: -moz-linear-gradient(transparent, #000); /* Firefox 3.6 - 15 */
              background: linear-gradient(transparent, #000); /* 标准的语法 */
              // background:red;
              display:flex;
              justify-content: space-between;
              align-items: center;

              color:#fff;
              padding:0 20px;
              box-sizing: border-box;
              .title {
                font-size: 16px;
                overflow: hidden;/*超出部分隐藏*/
                text-overflow:ellipsis;/* 超出部分显示省略号 */
                white-space: nowrap;/*规定段落中的文本不进行换行 */
              }
              .handle-wrap {
                display:flex;
                align-items: center;
                img {
                  cursor: pointer;
                }
              }
            }
          }
          
        }
        // &.f-screen {
        //   margin: 0 auto;
        //   max-width:1000px;
        // }
        &.screen4 {
          // margin-top:-10px;
          .video-item {
            height:50%;
            width:50%;
            // max-width:500px;
            // flex-shrink:0;
          }
        }
        &.screen9 {
          // margin-top:-5px;
          .video-item {
            // flex-shrink:0;
            width:33.33%;
            height:33.33%;
            // max-width:338px;
          }
        }
        // &.f-screen.screen4 {
        //   margin: 0 auto;
        //   width:100%;
        //   max-width: 100%;
        //   .video-item {
        //     max-width:50%;
        //   }
        // }
        // &.f-screen.screen9 {
        //   overflow: scroll;
        //   margin: 0 auto;
        //   width:100%;
        //   max-width: 100%;
        //   .video-item {
        //     max-width:33.33%;
        //   }
        // }
      }
    }
    .empty-content {
      display:flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width:100%;
      .tips {
        font-size:24px;
        color:#C2C7D2;
        margin-top:15px;
      }
    }
  }
}
</style>
